// 字段 Layout
export default function FieldLayout({
    text,
    children,
    className=""
}){
    const defaultFieldStyle = " relative w-full inline-flex tap-highlight-transparent shadow-sm px-3 bg-default-100 data-[hover=true]:bg-default-200 group-data-[focus=true]:bg-default-100 min-h-unit-10 rounded-medium flex-col items-start justify-center gap-0 !h-auto transition-background motion-reduce:transition-none !duration-150 outline-none group-data-[focus-visible=true]:z-10 group-data-[focus-visible=true]:ring-2 group-data-[focus-visible=true]:ring-focus group-data-[focus-visible=true]:ring-offset-2 group-data-[focus-visible=true]:ring-offset-background h-14 py-2"
    return (
        <div className={className+defaultFieldStyle}>
            <div className="z-10 pointer-events-none origin-top-left subpixel-antialiased block text-foreground-500 cursor-text relative  text-[12px] pb-0.5 pe-2 max-w-full text-ellipsis overflow-hidden">
                {text}
            </div>
            <div className="inline-flex w-full items-center h-full box-border group-data-[has-label=true]:items-end pb-0.5">
                {children}
            </div>
        </div>
    )
}